<nav></nav>

<script>
  $(function () {
    $('nav').before('<link rel="stylesheet" href="' + basePath + 'css/layout/navigator.min.css">');
    var navigator = {
      init: function () {
        this.query();
      },
      query: function () {
        publicAjax(basePath + 'menu', 'post', {type: GetQueryString('type'), typeId: GetQueryString('typeId')}, function (data) {
          console.log(data);
          if (data.ret === 1) {
            var type = data.data,
              str = '',
              activeClass = '',
              active = '.png';
            for (var i = 0; i < type.length; i++) {
              if (location.pathname.indexOf(type[i].path) !== -1) {
                activeClass = ' class="active"';
                active = '-active.png';
              } else {
                activeClass = '';
                active = '.png';
              }


              if(type[i].list && type[i].list.length){

                str += '<li style="list-style: none; position: relative"><a href="' + basePath + type[i].path + location.search +'"' + activeClass + '>' +
                        '<img src="' + basePath + type[i].icon + active + '">' +
                        '<span> '+type[i].name+' </span>'+
                        '</a><span class="Telescopic" style="position: absolute; top: 20px; right: 10px; font-size: 25px; font-weight: 700;">+</span></li>';
              }else {
                str += '<li style="list-style: none"><a href="' + basePath + type[i].path + location.search +'"' + activeClass + '>' +
                        '<img src="' + basePath + type[i].icon + active + '">' +
                        '<span> '+type[i].name+' </span>'  +
                        '</a></li>';
              }

              if (type[i].list && type[i].list.length) {
//                console.log(type[i])
                str += '<nav id="box" style="display: none">';
                for (var m = 0; m < type[i].list.length; m++) {
                  activeClass = location.pathname.indexOf(type[i].list[m].path) !== -1 ? ' class="active"' : '';
                  str += '<a href="' + basePath + type[i].list[m].path + location.search +'"' + activeClass + '>' +
                    '<span style="margin-left: 60px"> '+type[i].list[m].name+' </span>'  +
                    '</a>';
                }
                str += '</nav>'
              }
            }
            $('nav').html(str);
          } else {
            flavrShowByTime(data.msg, null, 'error', false);
          }
        }, false, {async: false});

        $('nav').on('click','.Telescopic',function () {
          $(this).parents('li').next('nav').toggle(500);
          if($(this).html() != '+'){
            $(this).html('+')
          }else {
            $(this).html('-')
          }
        })

        var Alist = $('a');
        $.each(Alist,function (key,val) {
          if($(val).hasClass('active')){
            if($(val).parent('nav')){
              $(val).parent('nav').show();
              $(val).parent('nav').prev().children('span').text('-')
            }
          }
        })



      }
    };
    navigator.init();
  });
</script>